﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="guestBookApp">
<head>
    <title>Guest Book</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <script src="AppScripts/guestBookApp.js"></script>
    <script src="AppService/DataService.js"></script>
    <script src="AppControllers/recordFormController.js"></script>
    <script src="AppControllers/indexController.js"></script>
    <script src="AppDirective/dirPagination.js"></script>
</head>
<body ng-controller="indexController">
    <br />
    <div class="container">
        <div class="alert alert-danger" ng-if="hasFormError">{{formErrors}}</div>

        <a href="" class="btn btn-primary " ng-click="showAddNewRecordForm()">
            <i class="glyphicon glyphicon-plus"></i> Add New Record
        </a>
        <dir-pagination-controls class="pull-right" boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="Pages\dirPagination.tpl.html"></dir-pagination-controls>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Text</th>
                            <th>
                                <a href="" ng-click="predicate = 'userName'; reverse=!reverse">
                                    <i class="glyphicon glyphicon-chevron-down" ng-if="predicate === 'userName' && reverse === true"></i>
                                    <i class="glyphicon glyphicon-chevron-up" ng-if="predicate === 'userName' && reverse === false"></i>
                                    User Name
                                </a>
                            </th>
                            <th>
                                <a href="" ng-click="predicate = 'email'; reverse=!reverse">
                                    <i class="glyphicon glyphicon-chevron-down" ng-if="predicate === 'email' && reverse === true"></i>
                                    <i class="glyphicon glyphicon-chevron-up" ng-if="predicate === 'email' && reverse === false"></i>
                                    E-mail
                                </a>
                            </th>
                            <th>
                                <a href="" ng-click="predicate = 'createdAt'; reverse=!reverse">
                                    <i class="glyphicon glyphicon-chevron-down" ng-if="predicate === 'createdAt' && reverse === true"></i>
                                    <i class="glyphicon glyphicon-chevron-up" ng-if="predicate === 'createdAt' && reverse === false"></i>
                                    Created At
                                </a>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr dir-paginate="recordItem in data.records | orderBy:predicate:reverse | itemsPerPage: pageSize " current-page="currentPage">
                            <td>{{recordItem.text}}</td>
                            <td>{{recordItem.userName}}</td>
                            <td>{{recordItem.email}}</td>
                            <td>{{recordItem.createdAt | date:'medium'}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
